import React, { useEffect } from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from '../../hooks/useAuth';

interface AuthGuardProps {
  children: React.ReactNode;
  requireAuth?: boolean;
  requiredPermissions?: string[];
  requiredRoles?: string[];
}

/**
 * 认证守卫组件
 * @param children 子组件
 * @param requireAuth 是否需要认证
 * @param requiredPermissions 需要的权限
 * @param requiredRoles 需要的角色
 */
const AuthGuard: React.FC<AuthGuardProps> = ({
  children,
  requireAuth = true,
  requiredPermissions = [],
  requiredRoles = [],
}) => {
  const { isAuthenticated, user, hasPermission, hasRole } = useAuth();
  const location = useLocation();

  // 如果是公共路由且用户已登录，重定向到首页
  if (!requireAuth && isAuthenticated) {
    return <Navigate to="/" replace />;
  }

  // 检查是否已登录
  if (requireAuth && !isAuthenticated) {
    // 重定向到登录页，保存原始请求路径
    return <Navigate to="/auth/login" state={{ from: location.pathname }} replace />;
  }

  // 如果用户是管理员，直接通过
  if (isAuthenticated && user?.roles?.some(role => role.code === 'admin')) {
    return <>{children}</>;
  }

  // 认证通过但需要检查权限
  if (isAuthenticated && requiredPermissions.length > 0) {
    // 检查是否具有所有所需权限
    const hasAllPermissions = requiredPermissions.every(permission => 
      hasPermission(permission)
    );

    if (!hasAllPermissions) {
      console.log('权限检查失败:', {
        requiredPermissions,
        userPermissions: user?.permissions,
        hasPermission: hasPermission
      });
      // 没有权限，重定向到403页面
      return <Navigate to="/403" replace />;
    }
  }

  // 认证通过但需要检查角色
  if (isAuthenticated && requiredRoles.length > 0) {
    // 检查是否具有任一所需角色
    const hasAnyRole = requiredRoles.some(role => 
      hasRole(role)
    );

    if (!hasAnyRole) {
      console.log('角色检查失败:', {
        requiredRoles,
        userRoles: user?.roles,
        hasRole: hasRole
      });
      // 没有所需角色，重定向到403页面
      return <Navigate to="/403" replace />;
    }
  }

  // 通过所有检查，渲染子组件
  return <>{children}</>;
};

export default AuthGuard; 